<template>
	<view class="e-skeleton-tabbar" :style="[customStyle]">
		<e-safe-bottom v-if="safeAreaInsetBottom"></e-safe-bottom>
		<view class="e-skeleton-tabbar__content" :class="[config.fixed && 'e-skeleton-tabbar--fixed']" :style="[style]">
			<view
				class="e-skeleton-tabbar__content__item"
				:class="[config.bulgeIndex === index && 'e-skeleton-tabbar__content__item--bulge']"
				v-for="(item, index) in list"
				:key="index"
			>
				<view class="e-skeleton-tabbar__content__item-icon" :class="[config.itemShape === 'circle' && 'e-skeleton-tabbar__content__item-icon--circle']">
					<SkeletonBlock>
						<view class="e-skeleton-tabbar__content__item-icon__block"></view>
					</SkeletonBlock>
				</view>
				<view class="e-skeleton-tabbar__content__item-text" v-if="config.showText">
					<SkeletonBlock>
						<view class="e-skeleton-tabbar__content__item-text__block"></view>
					</SkeletonBlock>
				</view>
			</view>
		</view>
		<view class="e-skeleton-tabbar__placeholder" :class="[!empty(config.bulgeIndex) && 'e-skeleton-tabbar__placeholder--bulge']" v-if="config.placeholder"></view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'skeleton-tabbar'
});
</script>

<script lang="ts" setup>
import { computed } from 'vue';
import { empty } from '../../libs/utils';
import SkeletonBlock from './block.vue';
const props = withDefaults(
	defineProps<{
		config: {
			fixed: boolean;
			placeholder: boolean;
			zIndex: number;
			bulgeIndex?: number;
			length: number;
			showText: boolean;
			itemShape: 'circle' | 'square';
		};
		customStyle?: Record<any, any>|string;
		animate?: boolean;
		safeAreaInsetBottom?:boolean
	}>(),
	{
		config: () => ({
			fixed: true,
			placeholder: true,
			zIndex: 965,
			length: 5,
			showText: true,
			itemShape: 'circle'
		})
	}
);

const list = computed(() => {
	return [...new Array(props.config.length).keys()];
});
const style = computed(() => {
	return {
		zIndex: props.config.zIndex
	};
});
</script>

<style lang="scss" scoped>
@import '../../libs/theme/skeleton-tabbar.scss';
</style>
